<template>
    <div>
        <h1>Father组件 编程式导航</h1>
        <hr>
        <RouterView />
        <!-- 也可以写成 <router-view></router-view> -->
    </div>
</template>

<script setup>
/**
 * 编程式导航：通过事件监听（点击、下拉）处理导航行为（操作）
 * 
 * 导航函数：（在hashhistory和history两种导航模式下通用）
 * 1.push():执行组件导航
        push(path):path参数：string类型 对应路由单元列表的path属性值
        push({导航参数对象})
    2.replace():执行组件导航
        replace(path):path参数：string类型 对应路由单元列表的path属性值
        replace({导航参数对象})
    相同点：执行组件的导航
    区别：
    push函数在导航的过程中会记录导航历史（浏览器会记录导航的历史）；
    replace函数在导航过程中不会记录导航历史（浏览器会替换现有的浏览历史记录）。

    上述两个函数通过 router 对象进行调用：
    1.this.$router.push|replace
    2.useRouter()函数 => 获取当前的路由对象 
        useRouter().push|replace
 */

</script>

<style lang="scss" scoped>

</style>